<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
  <title>相册详情 - 社交平台</title>
  <!-- Bootstrap 5 CSS -->
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
  <!-- Font Awesome -->
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css">
  
  <style>
    /* 基础样式 */
    body {
      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
      background-color: #000;
      color: #fff;
      margin: 0;
      overflow-x: hidden;
    }
    
    /* 顶部导航 */
    .top-nav {
      height: 50px;
      background-color: rgba(0,0,0,0.7);
      display: flex;
      align-items: center;
      padding: 0 15px;
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      z-index: 100;
    }
    
    .nav-title {
      font-size: 18px;
      font-weight: 600;
      margin: 0 auto;
      text-align: center;
    }
    
    .nav-btn {
      width: 40px;
      height: 40px;
      display: flex;
      align-items: center;
      justify-content: center;
      color: #fff;
      text-decoration: none;
    }
    
    /* 样式切换器 */
    .style-switcher {
      position: fixed;
      top: 50px;
      left: 0;
      right: 0;
      background-color: rgba(0,0,0,0.5);
      padding: 8px 15px;
      z-index: 90;
    }
    
    .style-tabs {
      display: flex;
      gap: 8px;
      overflow-x: auto;
      padding-bottom: 5px;
    }
    
    .style-tabs::-webkit-scrollbar {
      display: none;
    }
    
    .style-tab {
      padding: 6px 14px;
      background-color: rgba(255,255,255,0.1);
      border-radius: 20px;
      font-size: 14px;
      white-space: nowrap;
      cursor: pointer;
    }
    
    .style-tab.active {
      background-color: #2196f3;
      color: white;
    }
    
    /* 相册信息区 */
    .album-info {
      padding: 70px 15px 15px;
      background-color: #1a1a1a;
    }
    
    .album-header {
      display: flex;
      margin-bottom: 15px;
    }
    
    .album-cover {
      width: 80px;
      height: 80px;
      border-radius: 8px;
      overflow: hidden;
      margin-right: 15px;
      flex-shrink: 0;
    }
    
    .album-cover img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
    
    .album-meta {
      flex: 1;
    }
    
    .album-title {
      font-size: 20px;
      font-weight: 600;
      margin-bottom: 5px;
    }
    
    .album-desc {
      font-size: 14px;
      color: #ccc;
      line-height: 1.4;
      margin-bottom: 10px;
    }
    
    .album-stats {
      display: flex;
      gap: 15px;
      font-size: 13px;
      color: #aaa;
    }
    
    .album-actions {
      display: flex;
      gap: 10px;
    }
    
    .action-btn {
      flex: 1;
      padding: 8px 0;
      border-radius: 8px;
      font-size: 15px;
      font-weight: 500;
      text-align: center;
      cursor: pointer;
      border: none;
    }
    
    .btn-primary {
      background-color: #2196f3;
      color: white;
    }
    
    .btn-secondary {
      background-color: rgba(255,255,255,0.1);
      color: white;
    }
    
    /* 通用相册页面样式 */
    .album-page {
      display: none;
      margin-top: -1px;
    }
    
    .album-page.active {
      display: block;
    }
    
    /* 照片容器基础样式 */
    .photos-container {
      padding-bottom: 20px;
    }
    
    .photo-item {
      position: relative;
      overflow: hidden;
    }
    
    .photo-item img {
      width: 100%;
      display: block;
    }
    
    .photo-caption {
      position: absolute;
      bottom: 0;
      left: 0;
      right: 0;
      padding: 10px 15px;
      background: linear-gradient(transparent, rgba(0,0,0,0.7));
      font-size: 14px;
      transform: translateY(100%);
      transition: transform 0.3s;
    }
    
    .photo-item:hover .photo-caption {
      transform: translateY(0);
    }
    
    /* 样式1 - 大图浏览 */
    .large-photos .photo-item {
      margin-bottom: 5px;
    }
    
    .large-photos .photo-item img {
      width: 100%;
      height: auto;
    }
    
    /* 样式2 - 网格布局 */
    .grid-photos {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 2px;
    }
    
    .grid-photos .photo-item {
      aspect-ratio: 1;
    }
    
    .grid-photos .photo-item img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
    
    /* 样式3 - 瀑布流 */
    .masonry-photos {
      column-count: 2;
      column-gap: 2px;
    }
    
    .masonry-photos .photo-item {
      break-inside: avoid;
      margin-bottom: 2px;
    }
    
    .masonry-photos .photo-item img {
      width: 100%;
      height: auto;
    }
    
    /* 样式4 - 全屏浏览 */
    .fullscreen-photos {
      position: relative;
      min-height: 100vh;
    }
    
    .fullscreen-photos .photo-item {
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      display: none;
    }
    
    .fullscreen-photos .photo-item.active {
      display: block;
    }
    
    .fullscreen-photos .photo-item img {
      width: 100%;
      height: 100%;
      object-fit: contain;
    }
    
    .fullscreen-nav {
      position: fixed;
      bottom: 20px;
      left: 0;
      right: 0;
      display: flex;
      justify-content: space-between;
      padding: 0 15px;
      z-index: 80;
    }
    
    .screen-btn {
      width: 44px;
      height: 44px;
      border-radius: 50%;
      background-color: rgba(0,0,0,0.5);
      color: white;
      display: flex;
      align-items: center;
      justify-content: center;
      border: none;
      font-size: 20px;
      cursor: pointer;
    }
    
    .photo-counter {
      position: fixed;
      top: 60px;
      right: 15px;
      background-color: rgba(0,0,0,0.5);
      color: white;
      padding: 3px 8px;
      border-radius: 12px;
      font-size: 13px;
      z-index: 80;
    }
    
    /* 提示框 */
    .toast {
      position: fixed;
      bottom: 80px;
      left: 50%;
      transform: translateX(-50%);
      background-color: rgba(0,0,0,0.8);
      color: white;
      border-radius: 8px;
      padding: 10px 15px;
      font-size: 14px;
      z-index: 1000;
      display: none;
    }
  </style>
</head>
<body>
  <!-- 提示框 -->
  <div class="toast" id="toast"></div>
  
  <!-- 顶部导航 -->
  <nav class="top-nav">
    <a href="#" class="nav-btn" id="backBtn">
      <i class="fa fa-angle-left"></i>
    </a>
    <h1 class="nav-title">旅行相册</h1>
    <a href="#" class="nav-btn" id="moreBtn">
      <i class="fa fa-ellipsis-v"></i>
    </a>
  </nav>
  
  <!-- 样式切换器 -->
  <div class="style-switcher">
    <div class="style-tabs">
      <div class="style-tab active" data-style="large">大图浏览</div>
      <div class="style-tab" data-style="grid">网格布局</div>
      <div class="style-tab" data-style="masonry">瀑布流</div>
      <div class="style-tab" data-style="fullscreen">全屏浏览</div>
    </div>
  </div>
  
  <!-- 相册信息区 -->
  <div class="album-info">
    <div class="album-header">
      <div class="album-cover">
        <img src="https://picsum.photos/id/10/400/400" alt="相册封面">
      </div>
      <div class="album-meta">
        <div class="album-title">夏日海边旅行</div>
        <div class="album-desc">记录在海边的美好时光，阳光、沙滩和海浪...</div>
        <div class="album-stats">
          <div><i class="fa fa-picture-o"></i> 12张照片</div>
          <div><i class="fa fa-calendar"></i> 2023-07-15</div>
          <div><i class="fa fa-eye"></i> 248</div>
        </div>
      </div>
    </div>
    <div class="album-actions">
      <button class="action-btn btn-primary" onclick="showToast('已收藏相册')">
        <i class="fa fa-bookmark-o"></i> 收藏
      </button>
      <button class="action-btn btn-secondary" onclick="showToast('已分享相册')">
        <i class="fa fa-share-alt"></i> 分享
      </button>
    </div>
  </div>
  
  <!-- 样式1 - 大图浏览 -->
  <div class="album-page active large-photos" id="large">
    <div class="photos-container">
      <div class="photo-item">
        <img src="https://picsum.photos/id/10/800/1200" alt="海边日落">
        <div class="photo-caption">海边日落，美丽的晚霞染红了天空</div>
      </div>
      <div class="photo-item">
        <img src="https://picsum.photos/id/15/800/600" alt="沙滩漫步">
        <div class="photo-caption">赤脚走在沙滩上，感受海浪的轻抚</div>
      </div>
      <div class="photo-item">
        <img src="https://picsum.photos/id/28/800/1000" alt="海上日出">
        <div class="photo-caption">清晨的第一缕阳光，照亮了整个海面</div>
      </div>
      <div class="photo-item">
        <img src="https://picsum.photos/id/42/800/800" alt="海边小镇">
        <div class="photo-caption">宁静的海边小镇，有着独特的风情</div>
      </div>
      <div class="photo-item">
        <img src="https://picsum.photos/id/65/800/1100" alt="渔船">
        <div class="photo-caption">停泊在岸边的渔船，承载着渔民的希望</div>
      </div>
    </div>
  </div>
  
  <!-- 样式2 - 网格布局 -->
  <div class="album-page grid-photos" id="grid">
    <div class="photo-item">
      <img src="https://picsum.photos/id/10/400/400" alt="海边日落">
      <div class="photo-caption">海边日落</div>
    </div>
    <div class="photo-item">
      <img src="https://picsum.photos/id/15/400/400" alt="沙滩漫步">
      <div class="photo-caption">沙滩漫步</div>
    </div>
    <div class="photo-item">
      <img src="https://picsum.photos/id/28/400/400" alt="海上日出">
      <div class="photo-caption">海上日出</div>
    </div>
    <div class="photo-item">
      <img src="https://picsum.photos/id/42/400/400" alt="海边小镇">
      <div class="photo-caption">海边小镇</div>
    </div>
    <div class="photo-item">
      <img src="https://picsum.photos/id/65/400/400" alt="渔船">
      <div class="photo-caption">渔船</div>
    </div>
    <div class="photo-item">
      <img src="https://picsum.photos/id/76/400/400" alt="海浪">
      <div class="photo-caption">海浪</div>
    </div>
    <div class="photo-item">
      <img src="https://picsum.photos/id/87/400/400" alt="贝壳">
      <div class="photo-caption">贝壳</div>
    </div>
    <div class="photo-item">
      <img src="https://picsum.photos/id/96/400/400" alt="椰子树">
      <div class="photo-caption">椰子树</div>
    </div>
  </div>
  
  <!-- 样式3 - 瀑布流 -->
  <div class="album-page masonry-photos" id="masonry">
    <div class="photo-item">
      <img src="https://picsum.photos/id/10/400/600" alt="海边日落">
      <div class="photo-caption">海边日落，美丽的晚霞染红了天空</div>
    </div>
    <div class="photo-item">
      <img src="https://picsum.photos/id/15/400/500" alt="沙滩漫步">
      <div class="photo-caption">赤脚走在沙滩上，感受海浪的轻抚</div>
    </div>
    <div class="photo-item">
      <img src="https://picsum.photos/id/28/400/700" alt="海上日出">
      <div class="photo-caption">清晨的第一缕阳光，照亮了整个海面</div>
    </div>
    <div class="photo-item">
      <img src="https://picsum.photos/id/42/400/400" alt="海边小镇">
      <div class="photo-caption">宁静的海边小镇，有着独特的风情</div>
    </div>
    <div class="photo-item">
      <img src="https://picsum.photos/id/65/400/650" alt="渔船">
      <div class="photo-caption">停泊在岸边的渔船，承载着渔民的希望</div>
    </div>
    <div class="photo-item">
      <img src="https://picsum.photos/id/76/400/550" alt="海浪">
      <div class="photo-caption">汹涌的海浪，拍打着岸边的岩石</div>
    </div>
    <div class="photo-item">
      <img src="https://picsum.photos/id/87/400/450" alt="贝壳">
      <div class="photo-caption">沙滩上的贝壳，形态各异</div>
    </div>
  </div>
  
  <!-- 样式4 - 全屏浏览 -->
  <div class="album-page fullscreen-photos" id="fullscreen">
    <div class="photo-counter" id="counter">1/8</div>
    
    <div class="photos-container">
      <div class="photo-item active">
        <img src="https://picsum.photos/id/10/1000/1500" alt="海边日落">
        <div class="photo-caption">海边日落，美丽的晚霞染红了天空</div>
      </div>
      <div class="photo-item">
        <img src="https://picsum.photos/id/15/1000/1500" alt="沙滩漫步">
        <div class="photo-caption">赤脚走在沙滩上，感受海浪的轻抚</div>
      </div>
      <div class="photo-item">
        <img src="https://picsum.photos/id/28/1000/1500" alt="海上日出">
        <div class="photo-caption">清晨的第一缕阳光，照亮了整个海面</div>
      </div>
      <div class="photo-item">
        <img src="https://picsum.photos/id/42/1000/1500" alt="海边小镇">
        <div class="photo-caption">宁静的海边小镇，有着独特的风情</div>
      </div>
      <div class="photo-item">
        <img src="https://picsum.photos/id/65/1000/1500" alt="渔船">
        <div class="photo-caption">停泊在岸边的渔船，承载着渔民的希望</div>
      </div>
      <div class="photo-item">
        <img src="https://picsum.photos/id/76/1000/1500" alt="海浪">
        <div class="photo-caption">汹涌的海浪，拍打着岸边的岩石</div>
      </div>
      <div class="photo-item">
        <img src="https://picsum.photos/id/87/1000/1500" alt="贝壳">
        <div class="photo-caption">沙滩上的贝壳，形态各异</div>
      </div>
      <div class="photo-item">
        <img src="https://picsum.photos/id/96/1000/1500" alt="椰子树">
        <div class="photo-caption">海边的椰子树，随风摇曳</div>
      </div>
    </div>
    
    <div class="fullscreen-nav">
      <button class="screen-btn" id="prevBtn">
        <i class="fa fa-angle-left"></i>
      </button>
      <button class="screen-btn" id="nextBtn">
        <i class="fa fa-angle-right"></i>
      </button>
    </div>
  </div>
  
  <!-- Bootstrap JS -->
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
  
  <script>
    // 获取元素
    const styleTabs = document.querySelectorAll('.style-tab');
    const albumPages = document.querySelectorAll('.album-page');
    const backBtn = document.getElementById('backBtn');
    const moreBtn = document.getElementById('moreBtn');
    const toast = document.getElementById('toast');
    
    // 全屏浏览相关元素
    const fullscreenPage = document.getElementById('fullscreen');
    const photoItems = fullscreenPage.querySelectorAll('.photo-item');
    const prevBtn = document.getElementById('prevBtn');
    const nextBtn = document.getElementById('nextBtn');
    const counter = document.getElementById('counter');
    let currentIndex = 0;
    
    // 样式切换
    styleTabs.forEach(tab => {
      tab.addEventListener('click', function() {
        // 移除所有激活状态
        styleTabs.forEach(t => t.classList.remove('active'));
        albumPages.forEach(page => page.classList.remove('active'));
        
        // 设置当前激活状态
        this.classList.add('active');
        const style = this.getAttribute('data-style');
        document.getElementById(style).classList.add('active');
        
        showToast(`已切换到${this.textContent}`);
      });
    });
    
    // 返回按钮
    backBtn.addEventListener('click', function() {
      showToast('返回相册列表');
    });
    
    // 更多按钮
    moreBtn.addEventListener('click', function() {
      showToast('显示更多选项');
    });
    
    // 全屏浏览导航
    function updateCounter() {
      counter.textContent = `${currentIndex + 1}/${photoItems.length}`;
    }
    
    prevBtn.addEventListener('click', function() {
      photoItems[currentIndex].classList.remove('active');
      currentIndex = (currentIndex - 1 + photoItems.length) % photoItems.length;
      photoItems[currentIndex].classList.add('active');
      updateCounter();
    });
    
    nextBtn.addEventListener('click', function() {
      photoItems[currentIndex].classList.remove('active');
      currentIndex = (currentIndex + 1) % photoItems.length;
      photoItems[currentIndex].classList.add('active');
      updateCounter();
    });
    
    // 点击图片切换（全屏模式）
    fullscreenPage.addEventListener('click', function(e) {
      // 避免点击按钮时触发
      if (!e.target.closest('.screen-btn')) {
        nextBtn.click();
      }
    });
    
    // 滑动切换图片（全屏模式）
    let startX = 0;
    fullscreenPage.addEventListener('touchstart', function(e) {
      startX = e.touches[0].clientX;
    }, false);
    
    fullscreenPage.addEventListener('touchend', function(e) {
      if (!startX) return;
      
      const endX = e.changedTouches[0].clientX;
      const diffX = endX - startX;
      
      // 滑动距离足够大才切换
      if (diffX > 50) {
        prevBtn.click();
      } else if (diffX < -50) {
        nextBtn.click();
      }
      
      startX = 0;
    }, false);
    
    // 显示提示
    function showToast(message) {
      toast.textContent = message;
      toast.style.display = 'block';
      
      setTimeout(() => {
        toast.style.opacity = '0';
        setTimeout(() => {
          toast.style.display = 'none';
          toast.style.opacity = '1';
        }, 300);
      }, 2000);
    }
  </script>
</body>
</html>
